<template>
    <div>
       <Form inline class="ivu-mt">
            <FormItem class="ivu-mb-0">
      <RadioGroup v-model="patientDate" type="button">
          <Radio label="today">今天</Radio>
            <Radio label="yesterDay">昨天</Radio>
            <Radio label="sevenDay">7天</Radio>
            <Radio label="month">月</Radio>
        </RadioGroup>
        </FormItem>
        <FormItem class="ivu-mb-0">
        <DatePicker type="daterange" v-width="'100%'" v-model="date" placeholder="日期选择" />
        </FormItem>
        <FormItem class="ivu-mb-0">
         <Select v-model="model2" style="width:200px">
         <Option v-for="item in postList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
        </FormItem>
        </Form>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Table :columns="columns" :data="data" :loading="loading" border show-summary>
            <template slot-scope="{ row }" slot="total">
            <a @click="handleVisitDetail(row)">{{ row.total}}</a>
            </template>
            </Table>
        </Card>
        <Drawer title="回访数据" v-model="returnVisitDetail" width="70%">
        <Table :columns="columns2" :data="data2">

        </Table>
        <div class="ivu-mt iuv-text-center">
         <Page :total="100" show-elevator show-sizer show-total></Page>
        </div>
    </Drawer>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                loading: false,
                patientDate: 'today',
                model2: '',
                date: [(new Date()), (new Date())],
                returnVisitDetail: false,
                postList: [
                    {
                        value: '医助',
                        label: '医助'
                    },
                    {
                        value: '客服',
                        label: '客服'
                    }
                ],
                columns2: [
                    {
                        title: '基本信息',
                        key: 'basic',
                        width: 118
                    },
                    {
                        title: '病种',
                        key: 'disease',
                        width: 80
                    },
                    {
                        title: '诊疗号',
                        key: 'number',
                        width: 90
                    },
                    {
                        title: '挂号时间',
                        key: 'registerTime',
                        width: 125
                    },
                    {
                        title: '上次复诊时间',
                        key: 'EDtime',
                        width: 125
                    },
                    {
                        title: '未到天数',
                        key: 'underTime',
                        width: 100
                    },
                    {
                        title: '下次复诊时间',
                        key: 'nextTime',
                        width: 125
                    },
                    {
                        title: '总回访次数',
                        key: 'totalVisit',
                        width: 118
                    },
                    {
                        title: '本月回访次数​',
                        key: 'monthVisit',
                        minWidth: 100
                    },
                    {
                        title: '回访内容',
                        key: 'visitContent',
                        minWidth: 125
                    }
                ],
                data2: [
                    {
                        basic: '张三 男 21岁',
                        disease: '白癜风',
                        number: '113525',
                        registerTime: '2019-06-03',
                        EDtime: '2019-07-21',
                        underTime: '9',
                        nextTime: '2019-08-21',
                        totalVisit: '61',
                        monthVisit: '16'
                    },
                    {
                        basic: '王五 男 21岁',
                        disease: '白癜风',
                        number: '113525',
                        registerTime: '2019-06-03',
                        EDtime: '2019-07-21',
                        underTime: '9',
                        nextTime: '2019-08-21',
                        totalVisit: '61',
                        monthVisit: '16'
                    },
                    {
                        basic: '赵四 男 21岁',
                        disease: '白癜风',
                        number: '113525',
                        registerTime: '2019-06-03',
                        EDtime: '2019-07-21',
                        underTime: '9',
                        nextTime: '2019-08-21',
                        totalVisit: '61',
                        monthVisit: '16'
                    }
                ],
                columns: [
                    {
                        title: '回访人',
                        key: 'name',
                        align: 'center',
                        width: 118,
                        fixed: 'left'
                    },
                    {
                        title: '总次数',
                        key: 'total',
                        align: 'center',
                        slot: 'total',
                        width: 90,
                        fixed: 'left'
                    },
                    {
                        title: '总人数',
                        key: 'totalPerson',
                        align: 'center',
                        width: 90,
                        fixed: 'left'
                    },
                    {
                        title: '正常回访比例',
                        key: 'visitRatio',
                        align: 'center',
                        width: 125,
                        fixed: 'left'
                    },
                    {
                        title: '诊室',
                        key: 'room',
                        align: 'center',
                        width: 90
                    },
                    {
                        title: '回访方式',
                        align: 'center',
                        children: [
                            {
                                title: '电话',
                                key: 'phone',
                                width: 80
                            },
                            {
                                title: '微信',
                                key: 'weixin',
                                width: 80
                            },
                            {
                                title: 'QQ',
                                key: 'qq',
                                width: 80
                            },
                            {
                                title: '其它',
                                key: 'other',
                                width: 80
                            }
                        ]
                    },
                    {
                        title: '回访状态',
                        align: 'center',
                        children: [
                            {
                                title: '未接通',
                                key: 'Unconnected',
                                width: 90
                            },
                            {
                                title: '正常回访',
                                key: 'normal',
                                width: 118
                            },
                            {
                                title: '拉黑',
                                key: 'balcklist',
                                width: 90
                            },
                            {
                                title: '已到院',
                                key: 'already',
                                width: 90
                            }
                        ]
                    },
                    {
                        title: '数据年份',
                        align: 'center',
                        children: [
                            {
                                title: '2020',
                                key: 'year',
                                width: 90
                            },
                            {
                                title: '2019',
                                key: 'year1',
                                width: 90
                            },
                            {
                                title: '2018',
                                key: 'year2',
                                width: 90
                            },
                            {
                                title: '2017',
                                key: 'year3',
                                width: 90
                            },
                            {
                                title: '2016',
                                key: 'year4',
                                width: 90
                            },
                            {
                                title: '2015',
                                key: 'year5',
                                width: 90
                            },
                            {
                                title: '2014',
                                key: 'year6',
                                width: 90
                            }
                        ]
                    }
                ],
                data: []
            }
        },
        mounted () {
            const data = [];
            for (let i = 1; i < 10; i++) {
                data.push({
                    key: i,
                    name: '客服人员' + i,
                    room: i + '诊',
                    totalPerson: Math.round(Math.random() * 50),
                    visitRatio: '60%',
                    total: Math.round(Math.random() * 100),
                    phone: Math.round(Math.random() * 10),
                    weixin: Math.round(Math.random() * 10),
                    qq: Math.round(Math.random() * 10),
                    other: Math.round(Math.random() * 10),
                    Unconnected: Math.round(Math.random() * 30),
                    normal: Math.round(Math.random() * 10),
                    balcklist: Math.round(Math.random() * 10),
                    already: Math.round(Math.random() * 10),
                    year: Math.round(Math.random() * 10),
                    year1: Math.round(Math.random() * 10),
                    year2: Math.round(Math.random() * 10),
                    year3: Math.round(Math.random() * 10),
                    year4: Math.round(Math.random() * 10),
                    year5: Math.round(Math.random() * 10),
                    year6: Math.round(Math.random() * 10)
                });
            }
            this.data = data;
        },
        methods: {
            handleVisitDetail () {
                this.returnVisitDetail = true;
            }
        }
    }
</script>

<style scoped>

</style>
